// 更换头像
// 1. 初始化裁剪区域
$('#image').cropper({
    // 约束剪裁比例为1:1
    aspectRatio: 1,
    //  指定预览区域
    preview: '.img-preview'
})

// 2.调用方法
// 剪裁插件的方法语法： image.cropper('方法名',....方法的参数)
// $('#image').cropper('replace', url)

// 3.点击上传能够选择图片(触发文件域的单击事件)
// $('button:contains("上传")') 表示找到包含“上传”内容的button
$('.upload').on('click', function () {
    // 触发文件域的单击事件
    // $('#file').trigger('事件名')
    $('#file').trigger('click')
})

// 4.文件域内容改变，更换剪裁区图片
$('#file').on('change', function () {
    if (this.files.length > 0) {
        // 获取文件对象
        let fileObj = this.files[0]
        // 创建url
        let url = URL.createObjectURL(fileObj)
        // 更换剪裁区的图片
        $('#image').cropper('replace',url)
    }
})

// 5.点击确定，剪裁图片，转化格式，ajax提交
$('button:contains("确定")').on('click', function () {
    // 调用插件的语法，剪裁
    let canvas = $('#image').cropper('getCroppedCanvas', { width: 30, height: 30 })
    // 转成base64格式
    let str = canvas.toDataURL('image/jpeg', 0.5)
    // 提交这个base64格式的字符串给接口
    $.ajax({
        type: 'POST',
        url:'/my/user/avatar',
        data: { avatar: str },
        success: function (res) {
            layer.msg(res.message)
            if (res.status === 0) {
                // 调用父页面的函数
                window.parent.getUserInfo()
            }
        }
    })
})

